<template>
    <button
        :type="nativeType"
        :disabled="disabled"
        :class="classes"
        @click="onClick"
        @touchstart="onTouchstart"
    >
        <span class="my-button__text">
            <slot>{{text}}</slot>
        </span>
    </button>
</template>

<script>
export default {
  name: "my-button",
  props: {
    type: {
      type: String,
      default: "default" // 可选值: primary, info, danger, warning
    },

    size: {
      type: String,
      default: "normal" // 可选值: large, normal, small, mini
    },

    text: {
      type: String,
      default: ""
    },

    nativeType: {
      type: String,
      default: "button" // 可选值submit, reset, button
    },

    block: {
      type: Boolean,
      default: false
    },

    plain: {
      type: Boolean,
      default: false
    },

    square: {
      type: Boolean,
      default: false
    },

    round: {
      type: Boolean,
      default: false
    },

    hairline: {
      // 是否为细边框0.5px
      type: Boolean,
      default: false
    },

    disabled: {
      type: Boolean,
      default: false
    },

    bottomAction: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    classes() {
      let {
        type,
        size,
        disabled,
        hairline,
        block,
        plain,
        round,
        square,
        bottomAction
      } = this;
      let classes = [
        "my-button",
        `my-button--${type}`,
        `my-button--${size}`,
        {
          "my-button--disabled": disabled,
          "my-button--hairline": hairline,
          "my-button--block": block,
          "my-button--plain": plain,
          "my-button--round": round,
          "my-button--square": square,
          "my-button--bottom-action": bottomAction,
          "my-hairline--surround": hairline
        }
      ];

      return classes;
    }
  },

  methods: {
    onClick(event) {
      if (!this.disabled) {
        this.$emit("click", event);
      }
    },

    onTouchstart(event) {
      this.$emit("touchstart", event);
    }
  }
};
</script>

<style lang="less">
@import "./button.less";
</style>
